<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset_rtl.css" />
<link rel="stylesheet" href="css/text_rtl.css" />
<link rel="stylesheet" href="css/960_24_col_rtl.css" />
<link rel="stylesheet" href="css/demo.css" />
</head>
<body>
<h1>
  <a href="http://960.gs/">960 Grid System</a>
</h1>
<div class="container_24">
  <h2>
    24 Column Grid
  </h2>
  <div class="grid_24">
    <p>
      950
    </p>
  </div>
  <!-- end .grid_24 -->
  <div class="clear"></div>
  <div class="grid_1">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1 -->
  <div class="grid_23">
    <p>
      910
    </p>
  </div>
  <!-- end .grid_23 -->
  <div class="clear"></div>
  <div class="grid_2">
    <p>
      70
    </p>
  </div>
  <!-- end .grid_2 -->
  <div class="grid_22">
    <p>
      870
    </p>
  </div>
  <!-- end .grid_2 -->
  <div class="clear"></div>
  <div class="grid_3">
    <p>
      110
    </p>
  </div>
  <!-- end .grid_3 -->
  <div class="grid_21">
    <p>
      830
    </p>
  </div>
  <!-- end .grid_21 -->
  <div class="clear"></div>
  <div class="grid_4">
    <p>
      150
    </p>
  </div>
  <!-- end .grid_4 -->
  <div class="grid_20">
    <p>
      790
    </p>
  </div>
  <!-- end .grid_20 -->
  <div class="clear"></div>
  <div class="grid_5">
    <p>
      190
    </p>
  </div>
  <!-- end .grid_5 -->
  <div class="grid_19">
    <p>
      750
    </p>
  </div>
  <!-- end .grid_19 -->
  <div class="clear"></div>
  <div class="grid_6">
    <p>
      230
    </p>
  </div>
  <!-- end .grid_6 -->
  <div class="grid_18">
    <p>
      710
    </p>
  </div>
  <!-- end .grid_18 -->
  <div class="clear"></div>
  <div class="grid_7">
    <p>
      270
    </p>
  </div>
  <!-- end .grid_7 -->
  <div class="grid_17">
    <p>
      670
    </p>
  </div>
  <!-- end .grid_17 -->
  <div class="clear"></div>
  <div class="grid_8">
    <p>
      310
    </p>
  </div>
  <!-- end .grid_8 -->
  <div class="grid_16">
    <p>
      630
    </p>
  </div>
  <!-- end .grid_16 -->
  <div class="clear"></div>
  <div class="grid_9">
    <p>
      350
    </p>
  </div>
  <!-- end .grid_9 -->
  <div class="grid_15">
    <p>
      590
    </p>
  </div>
  <!-- end .grid_15 -->
  <div class="clear"></div>
  <div class="grid_10">
    <p>
      390
    </p>
  </div>
  <!-- end .grid_10 -->
  <div class="grid_14">
    <p>
      550
    </p>
  </div>
  <!-- end .grid_14 -->
  <div class="clear"></div>
  <div class="grid_11">
    <p>
      430
    </p>
  </div>
  <!-- end .grid_11 -->
  <div class="grid_13">
    <p>
      510
    </p>
  </div>
  <!-- end .grid_13 -->
  <div class="clear"></div>
  <div class="grid_12">
    <p>
      470
    </p>
  </div>
  <!-- end .grid_12 -->
  <div class="grid_12">
    <p>
      470
    </p>
  </div>
  <!-- end .grid_12 -->
  <div class="clear"></div>
  <div class="grid_1 suffix_23">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.suffix_23 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_1 suffix_22">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_1.suffix_22 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_2 suffix_21">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_2.suffix_21 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_3 suffix_20">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_3.suffix_20 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_4 suffix_19">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_4.suffix_19 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_5 suffix_18">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_5.suffix_18 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_6 suffix_17">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_6.suffix_17 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_7 suffix_16">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_7.suffix_16 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_8 suffix_15">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_8.suffix_15 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_9 suffix_14">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_9.suffix_14 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_10 suffix_13">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_10.suffix_13 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_11 suffix_12">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_11.suffix_12 -->
  <div class="grid_1 prefix_12 suffix_11">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_12.suffix_11 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_13 suffix_10">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_13.suffix_10 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_14 suffix_9">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_14.suffix_9 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_15 suffix_8">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_15.suffix_8 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_16 suffix_7">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_16.suffix_7 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_17 suffix_6">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_17.suffix_6 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_18 suffix_5">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_18.suffix_5 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_19 suffix_4">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_19.suffix_4 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_20 suffix_3">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_20.suffix_3 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_21 suffix_2">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_21.suffix_2 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_22 suffix_1">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_22.suffix_1 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_23">
    <p>
      30
    </p>
  </div>
  <!-- end .grid_1.prefix_23 -->
  <div class="clear"></div>
  <div class="grid_12 push_12">
    <div class="grid_6 alpha">
      <p>
        230
      </p>
    </div>
    <!-- end .grid_6.alpha -->
    <div class="grid_6 omega">
      <p>
        230
      </p>
    </div>
    <!-- end .grid_6.omega -->
    <div class="clear"></div>
    <div class="grid_1 alpha">
      <p>
        30
      </p>
    </div>
    <!-- end .grid_1.alpha -->
    <div class="grid_11 omega">
      <p>
        430
      </p>
    </div>
    <!-- end .grid_11.omega -->
  </div>
  <!-- end .grid_12.push_12 -->
  <div class="grid_12 pull_12">
    <div class="grid_1 alpha">
      <p>
        30
      </p>
    </div>
    <!-- end .grid_1.alpha -->
    <div class="grid_11 omega">
      <p>
        430
      </p>
    </div>
    <!-- end .grid_11.omega -->
    <div class="clear"></div>
    <div class="grid_6 alpha">
      <p>
        230
      </p>
    </div>
    <!-- end .grid_6.alpha -->
    <div class="grid_6 omega">
      <p>
        230
      </p>
    </div>
    <!-- end .grid_6.omega -->
  </div>
  <!-- end .grid_12.pull_12 -->
</div>
<!-- end .container_24 -->
</body>
</html>